/*
参数说明：
  shopHeigth-根据手机显示率动态计算滚动显示内容框高度
  checklist-购物车内商品List数组
components-商品组件信息{
  checklist-积分兑换商品List数组
  isMoney-是否显示金钱占位
  isScore-是否显示积分占位
  isRemove-是否显示购买按钮占位
  divsize-组件一排显示几个数据
  biaoqian-跳转积分详情还是商品详情界面(1 积分兑换界面  2 商品详情界面)
}
alertShow-弹出框参数{
  showmsg-服务器弹窗提示
  msg-服务器提示内容
}
shopInfoData-商品详情基础信息{
  soldCount-销量
  likeCount-收藏量
  nowPrice-新价格
  oldPrice-老价格
  desc-商品名字
  itemDetailImg-商品详情介绍
  like-商品是否收藏
}
  shopId-父界面传过来的商品ID
  valList-产地等属性数组
  demoList-banner滚动海报图片数组
*/
<template>
  <div>
    <alert v-model="alertShow.showmsg" :title="'提示'" @on-show="onShow" @on-hide="onHide">{{alertShow.msg}}</alert>
    <alert v-model="alertTel.showmsg" :title="'手机绑定'" @on-show="onTelShow" @on-hide="onTelHide">{{alertTel.msg}}</alert>
    <div  :style="boxStyle"  >
      <div style="margin-bottom: 60px">
        <swiper :list="demoList" :height=imgHw :auto="true" dots-position="center"></swiper>
        <flexbox :gutter="0" wrap="wrap" style="background-color: #ffffff;padding-top: 10px;">
          <flexbox-item :span="9">
              <div style="padding-left: 10px">
                <p style="font-size: 14px">{{shopInfoData.desc}}</p>
                <p style="text-align:left;color: #fa0000;display: inline-block">¥{{shopInfoData.nowPrice}}</p>
                <h5 style="text-decoration: line-through;text-align: left;color: #999999;display: inline-block">￥{{shopInfoData.oldPrice}}</h5>
              </div>
          </flexbox-item>
          <flexbox-item @click.native="cleanLikeFn">
            <flexbox :gutter="0">
              <flexbox-item :span="1/9">
                <img src="../../../../src/assets/images/shopMall/icon_xian@2x.png" style="height: 30px;">
              </flexbox-item>
              <flexbox-item>
                <flexbox :gutter="0" orient="vertical" style="text-align: center;margin-left: -15px;">
                  <flexbox-item v-if="shopInfoData.like === true" @click.native="cleanLikeFn">
                    <img    src="../../../../src/assets/images/shopMall/icon_ysc@2x.png" width="20px;">
                    <p  style="font-size: 12px;margin-top: -5px;">已收藏</p>
                  </flexbox-item>
                  <flexbox-item v-if="shopInfoData.like === false" @click.native="collectionFn">
                    <img   src="../../../../src/assets/images/shopMall/icon_wsc@2x.png" width="20px">
                    <p  style="font-size: 12px;margin-top: -5px;">收藏</p>
                  </flexbox-item>
                </flexbox>
              </flexbox-item>
            </flexbox>
          </flexbox-item>
          <!--<flexbox-item :span="12">-->
            <!--<flexbox :gutter="0" wrap="nowrap">-->
              <!--<flexbox-item :span="12" style="padding-left: 10px">-->
                <!--<p style="text-align:left;color: #fa0000;display: inline-block">¥{{shopInfoData.nowPrice}}</p>-->
                <!--<h5 style="text-decoration: line-through;text-align: left;color: #999999;display: inline-block">￥{{shopInfoData.oldPrice}}</h5>-->
              <!--</flexbox-item>-->
              <!--&lt;!&ndash;<flexbox-item :span="7" style="text-align: right">&ndash;&gt;-->
                <!--&lt;!&ndash;<h5 style="font-size: 15px;text-align: center;color: #999999;display: inline-block">成交量</h5>&ndash;&gt;-->
                <!--&lt;!&ndash;<h5 style="font-size: 15px;text-align: center;color: #fa0000;display: inline-block">{{shopInfoData.soldCount}}</h5>&ndash;&gt;-->
                <!--&lt;!&ndash;<h5 style="font-size: 15px;text-align: center;color: #999999;display: inline-block">收藏量</h5>&ndash;&gt;-->
                <!--&lt;!&ndash;<h5 style="font-size: 15px;text-align: center;color: #fa0000;display: inline-block">{{shopInfoData.likeCount}}</h5>&ndash;&gt;-->
              <!--&lt;!&ndash;</flexbox-item>&ndash;&gt;-->
            <!--</flexbox>-->
          <!--</flexbox-item>-->
        </flexbox>
        <!--<flexbox :gutter="0" wrap="nowrap" style="background-color: #ffffff">-->
          <!--<flexbox-item :span="3"><p style="font-size: 14px">孝行通精选</p></flexbox-item>-->
          <!--<flexbox-item :span="9"><p style="font-size: 5px">介绍文字介绍文字介绍文字介绍文介绍文字介绍文字介绍文字介绍文字介绍文字介绍文字介绍文字介绍文字介绍文字介绍文字介绍文字介绍文字介绍文字介绍文字介绍文字介绍文字</p></flexbox-item>-->
        <!--</flexbox>-->
        <div style="padding: 10px 0;font-size: 0">
          <img src="../../../../src/assets/images/shopMall/banner_ppcl@2x.png" width="100%">
        </div>
        <group label-width="4em" label-margin-right="2em" label-align="right" gutter="0">
          <x-input v-for="item in valList" readonly="readonly" :title="item.label" :placeholder="item.value" v-model="value3"   ></x-input>
        </group>
        <div>
          <img v-for="item in shopInfoData.itemDetailImg"  :src="item" style="width:100%;display:block">
        </div>
        <group :title="'热门推荐'">
          <shopGood :isList="components.checklist" :isMoney="components.isMoney" :isScore="components.isScore" :isRemove="components.isRemove" :divsize="components.size" :biaoqian="components.biaoqian"></shopGood>
        </group>
      </div>
    </div>
    <div>
      <tab :animate="true"  style="height: 40px">
        <tab-item @click.native="shopmainFn" >
          <div style="display: inline-block;padding-top: 5px">
            <img src="../../../../src/assets/images/shopMall/shopMain.png" width="24px" height="24px">
          </div>
        </tab-item>
        <tab-item @click.native="shopCarFn" >
          <div style="display: inline-block;position:absolute;z-index: 30;padding-left: 15px;top: -10px">
            <badge :text="cartCount"></badge>
          </div>
          <div style="display: inline-block;padding-top: 5px">
            <img src="../../../../src/assets/images/shopMall/shopGWC.png" width="24px" height="24px">
          </div>
        </tab-item>
        <tab-item selected @click.native="addShopCar" style="background-color: #3d82e5;color: #ffffff" >加入购物车</tab-item>
        <tab-item @click.native="buyShopFn" style="background-color: #f95320;color: #ffffff" >立即购买</tab-item>
      </tab>
    </div>
  </div>
</template>
<script>
  import { Swiper, Flexbox, FlexboxItem, XButton, Group, Scroller, FormPreview, XInput, Alert, Tab, TabItem, Badge, XHeader } from 'vux'
  import shopGood from '../../../components/shopCommodity/shopGoods_Q.vue'
  import * as urls from '../../../api/urls'
  import * as types from '../../../store/types'

  export default {
    components: {
      Swiper,
      Flexbox,
      FlexboxItem,
      XButton,
      Group,
      shopGood,
      Scroller,
      FormPreview,
      Alert,
      Tab,
      TabItem,
      Badge,
      XHeader,
      XInput
    },
    mounted: function () {
      document.getElementsByClassName('weui_tabbar')[0].style.display = 'none'
      document.getElementsByClassName('weui_tab_bd')[0].style.paddingBottom = '0'
      let width = document.body.clientWidth
      let heigth = (parseInt(width) / 100) * 65
      this.imgHw = heigth + 'px'
      this.shopId = window.localStorage.getItem('shopId')
      this.userId = window.localStorage.getItem('userId')
      this.$store.commit(types.USER_INFO, {id: this.userId})
      document.getElementsByClassName('weui_tab_bd')[0].style.overflowY = 'hidden'
      let clientHeight = parseInt(document.body.clientHeight)
      this.boxStyle = 'overflow-x: hidden;overflow-y: auto;height: ' + (clientHeight - 40) + 'px;'
      if (this.$store.state.userInfo.id === '' || this.$store.state.userInfo.id === null || this.$store.state.userInfo.id === undefined) {
        let userId = window.location.href.replace(/.*userId=(\w*)&?.*/, '$1')
        let id = window.location.href.replace(/.*id=(\w*)&?.*/, '$1')
        this.userId = userId
        this.shopId = id
        if (this.userId !== '' && this.userId !== null && this.userId !== undefined) {
          this.$store.commit(types.USER_INFO, {id: this.userId})
          this.getInfoList()
          this.hotList()
          this.$wechat.showOptionMenu()
          this.diyweixinfn1()
        } else {
          let url = window.location.origin
          window.location.href = url + '/api/wxAuth/index?type=t1'
        }
      } else {
        this.userId = this.$store.state.userInfo.id
        this.getInfoList()
        this.hotList()
        this.diyweixinfn1()
      }
    },
    data () {
      return {
        alertShow: {
          showmsg: false,
          msg: ''
        },
        alertTel: {
          showmsg: false,
          msg: ''
        },
        boxStyle: 'height: 300px;overflow-x: hidden;overflow-y: auto;',
        imgHw: '',
        cartCount: '',
        components: {
          checklist: [],
          isMoney: true,
          isRemove: false,
          isScore: false,
          size: 6,
          imgHw: '',
          biaoqian: 3
        },
        value3: '',
        shopHeigth: '',
        shopId: '',
        shopInfoData: {
          soldCount: '',
          likeCount: '',
          nowPrice: '',
          oldPrice: '',
          desc: '',
          itemDetailImg: '',
          like: false
        },
        valList: [],
        demoList: []
      }
    },
    methods: {
      hotList () {
        let that = this
        this.http(urls.hot, {}, function (res) {
          if (res.status === 100) {
            if (res.data.list.length !== 0) {
              that.checklist = res.data.list
              for (let i = 0; i < res.data.list.length; i++) {
                let itemObj = {}
                itemObj.url = res.data.list[i].imgUrl
                itemObj.name = res.data.list[i].name
                itemObj.shopId = res.data.list[i].itemId
                itemObj.nowPrice = res.data.list[i].nowPrice
                itemObj.oldPrice = res.data.list[i].oldPrice
                that.components.checklist.push(itemObj)
              }
            }
          } else {
            that.alertShow.showmsg = true
            that.alertShow.msg = res.errMsg
          }
        }, function (res) {
          that.alertShow.showmsg = true
          that.alertShow.msg = res
        })
      },
      getInfoList () {
        let userId = this.$store.state.userInfo.id
        let that = this
        this.demoList = []
        this.valList = []
        this.http(urls.shopDetail, {userId: userId, id: that.shopId}, function (res) {
          if (res.status === 100) {
            that.cartCount = res.data.cartCount
//            that.shopInfoData.soldCount = res.data.item.soldCount
            that.shopInfoData.likeCount = res.data.item.likeCount
            that.shopInfoData.nowPrice = res.data.item.nowPrice
            that.shopInfoData.oldPrice = res.data.item.oldPrice
            that.shopInfoData.desc = res.data.item.desc
            that.shopInfoData.itemDetailImg = res.data.item.itemDetailImg
            that.shopInfoData.like = res.data.item.like
            if (res.data.item.itemBannerImg.length !== 0) {
              for (let i = 0; i < res.data.item.itemBannerImg.length; i++) {
                let bannerObj = {}
                bannerObj.img = res.data.item.itemBannerImg[i]
                that.demoList.push(bannerObj)
              }
            }
            if (res.data.item.propertis.length !== 0) {
              for (let i = 0; i < res.data.item.propertis.length; i++) {
                let valObj = {}
                valObj.label = res.data.item.propertis[i].name
                valObj.value = res.data.item.propertis[i].value
                that.valList.push(valObj)
              }
            }
          } else {
            that.alertShow.showmsg = true
            that.alertShow.msg = res.errMsg
          }
        }, function (res) {
          that.alertShow.showmsg = true
          that.alertShow.msg = res
        })
      },
      collectionFn () {
        let userId = this.$store.state.userInfo.id
        let that = this
        this.http(urls.shopLike, {userId: userId, itemId: parseInt(that.shopId)}, function (res) {
          if (res.status === 100) {
            that.shopInfoData.like = true
          } else {
            that.alertShow.showmsg = true
            that.alertShow.msg = res.errMsg
          }
        }, function (res) {
          that.alertShow.showmsg = true
          that.alertShow.msg = res
        })
      },
      cleanLikeFn () {
        let userId = this.$store.state.userInfo.id
        let that = this
        this.http(urls.cancelLike, {userId: userId, itemId: parseInt(that.shopId)}, function (res) {
          if (res.status === 100) {
            that.shopInfoData.like = false
          } else {
            that.alertShow.showmsg = true
            that.alertShow.msg = res.errMsg
          }
        }, function (res) {
          that.alertShow.showmsg = true
          that.alertShow.msg = res
        })
      },
      shopmainFn () {
        this.$router.push({
          path: '/content/shoppingMall/ShoppingMall'
        })
        this.$router.go(1)
      },
      shopCarFn () {
        this.$router.push({
          path: '/content/shoppingCar/ShoppingCar'
        })
        this.$router.go(1)
      },
      setShopCarNum () {
        let userId = this.$store.state.userInfo.id
        let that = this
        that.http(urls.cartAndSign, {userId: userId}, function (res) {
          if (res.status === 100) {
            if (res.data.cartCount !== 0) {
              that.$root.$children[0].$data.shopCarNum = res.data.cartCount.toString()
            } else {
              that.$root.$children[0].$data.shopCarNum = ''
            }
          } else {
            that.alertShow.showmsg = true
            that.alertShow.msg = res.errMsg
          }
        }, function (res) {
          that.alertShow.showmsg = true
          that.alertShow.msg = res
        })
      },
      addShopCar () {
        let userId = this.$store.state.userInfo.id
        let that = this
        this.http(urls.addToCart, {userId: userId, itemId: parseInt(that.shopId)}, function (res) {
          if (res.status === 100) {
            that.getInfoList()
            that.setShopCarNum()
            that.alertShow.showmsg = true
            that.alertShow.msg = '已添加商品' + that.shopInfoData.desc + '至您的购物车中'
          } else {
            that.alertShow.showmsg = true
            that.alertShow.msg = res.errMsg
          }
        }, function (res) {
          that.alertShow.showmsg = true
          that.alertShow.msg = res
        })
      },
      buyShopFn () {
        let userId = this.$store.state.userInfo.id
        let that = this
        that.http(urls.userIndex, {userId: userId}, function (res) {
          if (res.status === 100) {
            if (res.data.user.tel !== '' && res.data.user.tel !== null && res.data.user.tel !== undefined) {
              that.$router.push({
                path: '/shopMain/goShopBuy',
                query: {
                  shopId: that.shopId
                }
              })
              that.$router.go(1)
            } else {
              that.alertTel.showmsg = true
              that.alertTel.msg = '请先绑定手机号'
            }
          } else {
            that.alertShow.showmsg = true
            that.alertShow.msg = res.errMsg
          }
        }, function (res) {
          that.alertShow.showmsg = true
          that.alertShow.msg = res
        })
      },
      onShow () {
        // 弹窗出现时触发
      },
      onHide () {
        // 弹窗关闭时触发
      },
      onTelShow () {
        // 手机未绑定弹窗出现时触发
      },
      onTelHide () {
        // 手机未绑定弹窗关闭时触发
        this.$router.push({
          path: '/UserInformation'
        })
        this.$router.go(1)
      },
      diyweixinfn1 () {
        let that = this
        let userId = this.$store.state.userInfo.id
        let url = window.location.origin
        let link = url + '/api/wxAuth/index?type=t7&id=' + that.shopId + '&uid=' + userId
        that.$wechat.onMenuShareAppMessage({
          title: that.shopInfoData.desc + '商品分享', // 分享标题
          desc: '优惠商品带回家', // 分享描述
          link: link, // 分享链接
          imgUrl: that.shopInfoData.itemDetailImg, // 分享图标
          success: function () {
            // 用户确认分享后执行的回调函数
          },
          cancel: function () {
            // 用户取消分享后执行的回调函数
          }
        })
        that.$wechat.onMenuShareTimeline({
          title: that.shopInfoData.desc + '商品分享', // 分享标题
          link: link, // 分享链接
          imgUrl: that.shopInfoData.itemDetailImg, // 分享图标
          success: function () {
            // 用户确认分享后执行的回调函数
          },
          cancel: function () {
            // 用户取消分享后执行的回调函数
          }
        })
      }
    }
  }
</script>
<style scoped="scoped">
</style>
